<template>
  <div class="drawerListDetailComp h100">
    <a-row class="h100 drawerListDetailCompMain">
      <a-col :md="colProps.md[0]" :sm="24" class="h100 drawerListDetailLeft">
        <slot name="detailMain">
          <div>详情页左边</div>
        </slot>
      </a-col>
      <a-col :md="colProps.md[1]" :sm="24" class="h100 drawerListDetailRight" :style="{backgroundColor:rightBgColor}">
        <slot name="detailRight">
          <div>详情页右边</div>
        </slot>
      </a-col>
    </a-row>
  </div>
</template>
<script>
// 列表详情页布局
import { mapMutations } from 'vuex'
export default {
  props: {
    colProps: {
      type: Object,
      default () {
        return {
          md: [17, 7]
        }
      }
    },
    rightBgColor: {
      type: String,
      default: '#f9f9f9'
    }
  },
  data () {
    return {

    }
  },
  methods: {
    ...mapMutations(['SET_rightDrawerOPen']),
    closeDrawer () {
      this.SET_rightDrawerOPen(false)
    }
  }
}
</script>
<style lang="less" scoped>
.drawerListDetailComp {
  flex:1 0 0;
  overflow:hidden;
  display: flex;
  flex-direction: column;

  .drawerListDetailCompMain {
    flex:1 0 0;
    border-bottom:1px solid @borderColor;
    border-top:1px solid @borderColor;
    overflow:hidden;
  }
  .drawerListDetailCompFooter {
    flex:none;
    padding:15px 24px 15px 24px;
  }
  .drawerListDetailLeft {
    overflow: auto;
    padding:24px;
    padding-left:@drawerPl;
  }
  .drawerListDetailRight {
    border-left:1px solid @borderColor;
    overflow: auto;
    padding:24px;
  }
}
</style>
